<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>经典俄罗斯方块</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="tetris-game.css">
</head>
<body class="bg-gray-900 min-h-screen flex flex-col items-center justify-center p-4 text-light font-game">
    <div class="max-w-4xl w-full mx-auto">
        <!-- 游戏标题 -->
        <header class="text-center mb-6">
            <h1 class="text-[clamp(2rem,5vw,3rem)] text-primary mb-2 tracking-wider">俄罗斯方块</h1>
            <p class="text-gray-400 text-sm md:text-base">使用方向键控制方块，空格键快速下落</p>
        </header>

        <!-- 游戏区域 -->
        <div class="grid grid-cols-1 lg:grid-cols-3 gap-4">
            <!-- 左侧信息面板 -->
            <div class="flex flex-col gap-4">
                <div class="bg-dark rounded-lg pixel-corners game-shadow p-4">
                    <h2 class="text-primary text-lg mb-3">分数</h2>
                    <div class="text-3xl text-white" id="score">0</div>
                </div>
                
                <div class="bg-dark rounded-lg pixel-corners game-shadow p-4">
                    <h2 class="text-primary text-lg mb-3">行数</h2>
                    <div class="text-3xl text-white" id="lines">0</div>
                </div>
                
                <div class="bg-dark rounded-lg pixel-corners game-shadow p-4">
                    <h2 class="text-primary text-lg mb-3">等级</h2>
                    <div class="text-3xl text-white" id="level">1</div>
                </div>
                
                <div class="bg-dark rounded-lg pixel-corners game-shadow p-4">
                    <h2 class="text-primary text-lg mb-3">下一个</h2>
                    <canvas id="nextPiece" class="w-full h-24 bg-gray-800 rounded"></canvas>
                </div>
            </div>
            
            <!-- 游戏主区域 -->
            <div class="relative">
                <div class="bg-dark rounded-lg pixel-corners game-shadow overflow-hidden">
                    <!-- 游戏画布 -->
                    <canvas id="gameCanvas" class="w-full h-auto tetris-grid block"></canvas>
                    
                    <!-- 游戏开始界面 -->
                    <div id="startScreen" class="absolute inset-0 bg-dark/90 flex flex-col items-center justify-center z-10">
                        <h2 class="text-2xl text-primary mb-6">准备开始</h2>
                        <button id="startBtn" class="bg-primary hover:bg-primary/80 text-white px-8 py-4 rounded-lg transition-all active:scale-95 mb-4">
                            <i class="fa fa-play mr-2"></i>开始游戏
                        </button>
                        <p class="text-gray-400 text-sm">最高纪录: <span id="highScoreDisplay">0</span></p>
                    </div>
                    
                    <!-- 游戏暂停界面 -->
                    <div id="pauseScreen" class="absolute inset-0 bg-dark/90 flex flex-col items-center justify-center z-10 hidden">
                        <h2 class="text-2xl text-primary mb-6">游戏暂停</h2>
                        <button id="resumeBtn" class="bg-primary hover:bg-primary/80 text-white px-8 py-4 rounded-lg transition-all active:scale-95 mb-4">
                            <i class="fa fa-play mr-2"></i>继续游戏
                        </button>
                    </div>
                    
                    <!-- 游戏结束界面 -->
                    <div id="gameOverScreen" class="absolute inset-0 bg-dark/90 flex flex-col items-center justify-center z-10 hidden">
                        <h2 class="text-2xl text-secondary mb-2">游戏结束</h2>
                        <p class="text-white mb-6">你的得分: <span id="finalScore">0</span></p>
                        <button id="restartBtn" class="bg-primary hover:bg-primary/80 text-white px-8 py-4 rounded-lg transition-all active:scale-95 mb-4">
                            <i class="fa fa-refresh mr-2"></i>再来一局
                        </button>
                        <p class="text-gray-400 text-sm">最高纪录: <span id="gameOverHighScore">0</span></p>
                    </div>
                </div>
                
                <!-- 游戏控制按钮 - 移动设备 -->
                <div class="grid grid-cols-3 gap-2 mt-4 md:hidden">
                    <button id="leftBtn" class="bg-primary/80 hover:bg-primary text-white py-4 rounded-lg transition-all active:scale-95">
                        <i class="fa fa-chevron-left text-xl"></i>
                    </button>
                    <div class="grid grid-rows-2 gap-2">
                        <button id="rotateBtn" class="bg-primary/80 hover:bg-primary text-white py-2 rounded-lg transition-all active:scale-95">
                            <i class="fa fa-rotate-right text-xl"></i>
                        </button>
                        <button id="dropBtn" class="bg-secondary/80 hover:bg-secondary text-white py-2 rounded-lg transition-all active:scale-95">
                            <i class="fa fa-arrow-down text-xl"></i>
                        </button>
                    </div>
                    <button id="rightBtn" class="bg-primary/80 hover:bg-primary text-white py-4 rounded-lg transition-all active:scale-95">
                        <i class="fa fa-chevron-right text-xl"></i>
                    </button>
                </div>
            </div>
            
            <!-- 右侧控制面板 -->
            <div class="flex flex-col gap-4">
                <div class="bg-dark rounded-lg pixel-corners game-shadow p-4">
                    <h2 class="text-primary text-lg mb-3">控制</h2>
                    <ul class="text-gray-300 text-sm space-y-2">
                        <li><i class="fa fa-arrow-left mr-2"></i>左移</li>
                        <li><i class="fa fa-arrow-right mr-2"></i>右移</li>
                        <li><i class="fa fa-arrow-down mr-2"></i>下移</li>
                        <li><i class="fa fa-arrow-up mr-2"></i>旋转</li>
                        <li><i class="fa fa-space-shuttle mr-2"></i>空格: 快速下落</li>
                        <li><i class="fa fa-pause mr-2"></i>P: 暂停游戏</li>
                    </ul>
                </div>
                
                <div class="bg-dark rounded-lg pixel-corners game-shadow p-4">
                    <h2 class="text-primary text-lg mb-3">方块颜色</h2>
                    <div class="grid grid-cols-2 gap-2 text-sm">
                        <div class="flex items-center">
                            <div class="w-4 h-4 bg-blue-500 mr-2"></div>
                            <span>I</span>
                        </div>
                        <div class="flex items-center">
                            <div class="w-4 h-4 bg-orange-500 mr-2"></div>
                            <span>L</span>
                        </div>
                        <div class="flex items-center">
                            <div class="w-4 h-4 bg-sky-500 mr-2"></div>
                            <span>J</span>
                        </div>
                        <div class="flex items-center">
                            <div class="w-4 h-4 bg-yellow-500 mr-2"></div>
                            <span>O</span>
                        </div>
                        <div class="flex items-center">
                            <div class="w-4 h-4 bg-green-500 mr-2"></div>
                            <span>S</span>
                        </div>
                        <div class="flex items-center">
                            <div class="w-4 h-4 bg-purple-500 mr-2"></div>
                            <span>T</span>
                        </div>
                        <div class="flex items-center">
                            <div class="w-4 h-4 bg-red-500 mr-2"></div>
                            <span>Z</span>
                        </div>
                    </div>
                </div>
                
                <div class="bg-dark rounded-lg pixel-corners game-shadow p-4">
                    <h2 class="text-primary text-lg mb-3">分数规则</h2>
                    <ul class="text-gray-300 text-sm space-y-2">
                        <li>1行: 100分</li>
                        <li>2行: 300分</li>
                        <li>3行: 500分</li>
                        <li>4行: 800分</li>
                        <li>等级提升: 速度加快</li>
                    </ul>
                </div>
                
                <div class="flex flex-col gap-2">
                    <button id="pauseBtn" class="bg-dark hover:bg-gray-80 text-white px-4 py-3 rounded-lg transition-all active:scale-95 flex items-center justify-center">
                        <i class="fa fa-pause mr-2"></i>暂停
                    </button>
                    <button id="soundBtn" class="bg-dark hover:bg-gray-80 text-white px-4 py-3 rounded-lg transition-all active:scale-95 flex items-center justify-center">
                        <i id="soundIcon" class="fa fa-volume-up mr-2"></i>音效
                    </button>
                </div>
            </div>
        </div>

        <footer class="mt-12 text-center text-gray-500 text-xs">
            <p>© 2025 俄罗斯方块 | 经典游戏重现</p>
        </footer>
    </div>

    <script src="tetris-game.js"></script>
</body>
</html>
    